<template>
  <div class="shoppingcar">
    <!-- 头部 -->
    <div class="top_box">
      <router-link to="/home">
        <div class="logo">菜篮子</div>
      </router-link>

      <div class="car_box">
        <el-steps :active="active" finish-status="success">
          <el-step title="查看购物车"></el-step>
          <el-step title="确认订单"></el-step>
          <el-step title="完成支付"></el-step>
        </el-steps>
      </div>

      <div class="right_top">
        <!-- 首页 -->
        <router-link to="/home">
          <div class="home">
            <span class="iconfont icon-shouye-shouye"></span>首页
          </div>
        </router-link>
        <!-- 购物车 -->

        <router-link to="/personal" tag="div" class="car">个人中心</router-link>
        <div class="car" @click="prev" v-if="active == 2">上一步</div>
      </div>
    </div>
    <!-- 我的购物车 -->
    <div class="container" v-if="active == 1">
      <div class="sc_title">
        <p class="sc_p">我的购物车</p>
        <p>请选择您要结算购物的商品</p>
      </div>

      <div class="warehouse">
        <p class="sc_panel_info">
          <span class="sc_panel_price" v-if="goodsList"
            >CGJ001号仓库（{{ goodsList.length }}件）</span
          >
        </p>

        <ul class="carttitle">
          <li>选项</li>
          <li>商品图</li>
          <li>品名</li>
          <li>数量</li>
          <li>价格</li>
        </ul>
        <div class="car-box">
          <ul class="cartlist" v-for="(item, index) in goodsList" :key="index">
            <li><input type="checkbox" v-model="item.completed" /></li>
            <li>
              <div class="carimg">
                <img :src="item.bigImg" alt="" />
              </div>
            </li>
            <li>
              <p class="title">{{ item.description }}</p>
            </li>
            <li>
              <div class="detinfo_nub">
                <input
                  type="button"
                  class="sub"
                  value="-"
                  @click="sub(item.homeId)"
                />
                <input type="text" class="gdnb" :value="item.num" />
                <input
                  type="button"
                  class="add"
                  value="+"
                  @click="add(item.homeId)"
                />
              </div>
            </li>

            <li>
              <p class="carprice">￥{{ item.BigImgprice }}</p>
            </li>
            <span class="del"
              ><span
                @click="delcar(item.homeId)"
                class="iconfont icon-shanchu"
              ></span
            ></span>
          </ul>
        </div>

        <div class="check_box">
          <div class="pull_left">
            <input type="checkbox" v-model="checkedAll" />全选
          </div>
          <div class="pull_total">
            合计：{{ total }}元<el-button @click="next">结算</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单 -->
    <div class="container" v-if="active == 2">
      <div class="orders_box">
        <div class="address_title">
          <div class="big_box">
            <p>请确认收货地址</p>
            <!-- 地址 -->
            <div class="address_two" v-if="bottom">
              <div class="give">
                <strong>寄送至：</strong> <span>{{ bottom.address }}</span>
                {{ bottom.page }}
              </div>
              <div class="receipt">
                <strong>收货人：</strong><span>{{ bottom.name }}</span>
                {{ bottom.phone }}
              </div>
            </div>
          </div>
        </div>
        <div class="ordinfobox">
          <div class="next"><b>按购物车的收货时间拆单</b></div>
          <small
            >提示：赠品等关联优惠商品不能自主拆单，由系统安排随单配送！</small
          >
        </div>
        <div class="shopping">
          <div
            class="shopping_box"
            v-for="(item, index) in goodsList"
            :key="index"
          >
            <div class="dis_box" v-if="item.completed == true">
              <img style="width:120px;padding-right: 20px;" :src="item.bigImg" alt="" />
              <div class="big_box">
                <div class="shopping_title">{{ item.description }}</div>
                <div class="shopping_price">
                  商品单价为：
                  <span>￥{{ item.BigImgprice }} * {{ item.num }}</span>
                </div>
                <div class="time">
                  预计收货日期：2022-11-20
                  <span>（疫情期间仅供参考）</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pull_total">
          合计：{{ total }}元<el-button type="text" @click="Next"
            >支付</el-button
          >
        </div>
      </div>
    </div>
    <!-- 支付 -->
    <div class="container" v-if="active == 3">
      <div class="successful">
        <img src="../assets/img/successful.png" alt="" />
        <p class="suc_font">支付成功</p>
        <el-button @click="toURL">返回</el-button>
      </div>
      <!-- 页脚 -->
    </div>
    <footerpage></footerpage>
  </div>
</template>
<script>
import footerpage from "../components/FooterPage.vue";

export default {
  data() {
    return {
      active: 0,
      flag: false,
      goodsList: [],
      bottom: null, //选中数据
      jiesuanList: [],
      quxiaoMain: [],
    };
  },

  methods: {
    // 数量加一
    add(id) {
      let index = this.goodsList.findIndex((item) => item.homeId == id);
      this.goodsList[index].num += 1;
    },
    // 数量减一
    sub(id) {
      let index = this.goodsList.findIndex((item) => item.homeId == id);
      this.goodsList[index].num -= 1;
      this.goodsList[index].num =
        this.goodsList[index].num < 1 ? 1 : this.goodsList[index].num;
    },
    delcar(id) {
      //清除
      console.log(id);
      let index = this.goodsList.findIndex((item) => item.homeId == id);
      this.goodsList.splice(index, 1);
      localStorage.setItem("Shopcar", JSON.stringify(this.goodsList));
    },

    // 购物流程
    //1.结算
    next() {
      if (this.active++ > 2) this.active = 0;
      if (this.active == 2) {
        let arr = this.goodsList.filter((item) => item.completed);

        this.goodsList.forEach((item) => {
          if (item.completed) {
            item.a = true;
          }
        });

        window.localStorage.setItem("jiesuan", JSON.stringify(arr));
      }
    },
    // 2.是否支付
    Next() {
      this.$confirm("请确认是否支付?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "成功支付!",
          });
          this.next();
          this.Confirm();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.Cancel();
        });
    },
    //确认支付
    Confirm() {
      console.log("确认");

      console.log(this.goodsList);
      window.localStorage.setItem("jiesuan", JSON.stringify(this.goodsList));

      let arr = this.goodsList.filter((item) => !item.completed);

      window.localStorage.setItem("Shopcar", JSON.stringify(arr));
    },
    //取消支付
    Cancel() {
      console.log("取消");
      let arr = this.goodsList.filter((item) => item.completed);
      window.localStorage.setItem("quxiao", JSON.stringify(arr));


      this.$router.push({ path: "/personal" });
    },
    //3.确认支付否返回个人中心
    prev() {
      if (this.active++ > 1) this.active = 1;
    },
    toURL() {
      // 跳转到个人中心
      this.$router.push({ path: "/personal" });
    },
  },
  computed: {
    checkedAll: {
      get() {
        return this.goodsList.every((item) => {
          return item.completed;
        });
      },
      set(value) {
        console.log(value);
        this.goodsList.forEach((item) => {
          item.completed = value;
        });
      },
    },
    // 选中的总价格
    total: function () {
      return this.goodsList.reduce(function (total, item) {
        if (item.completed) {
          return (total += item.BigImgprice * item.num);
        } else {
          return total;
        }
      }, 0);
    },
  },
  created() {
    // 取加入购物车的数据
    if (localStorage.Shopcar) {
      this.goodsList = JSON.parse(localStorage.getItem("Shopcar"));
    }

    //地址
    if (localStorage.tianjia) {
      this.lists = JSON.parse(localStorage.getItem("tianjia"));
    }
    if (localStorage.xuan) {
      this.bottom = JSON.parse(localStorage.getItem("xuan"));
    }
  },
  mounted() {
    this.next();
  },
  components: { footerpage },
};
</script>

<style lang="scss" scoped>
.shoppingcar {
  // margin-bottom: 25px;
  background: #fff;
  .top_box {
    width: 100%;
    background-color: #ad0002;
    display: flex;
    height: 70px;
    align-items: center;
    justify-content: space-evenly;
    .logo {
      //  width: 210px;
      /* height: 70px; */
      font-family: "font";
      font-weight: 700;
      font-size: 65px;
      color: #fff;
      transform: rotateZ(355deg);
      position: relative;
      img {
        position: absolute;
        top: 44px;
        right: 1px;
        width: 20px;
        height: 20px;
        border-radius: 7px;
      }
    }
    .car_box {
      width: 30%;
      margin: 0 170px;
    }
    .right_top {
      display: flex;
      .home {
        color: #fff;
        font-size: 17px;
        padding-right: 20px;

        .icon-shouye-shouye {
          padding-right: 5px;
          font-size: 20px;
        }
      }
      .car {
        color: #fff;
        font-size: 17px;
        padding-right: 20px;
        cursor: pointer;
      }
    }
  }

  // ::v-deep {
  //   .is-process{
  //       font-weight: 0;

  //   }
  //   // .el-step__title.is-process {
  //   //   font-weight: 0;
  //   // }
  //   // .el-step__title {
  //   // }
  //   // .el-step__head{
  //   //   color: #c0c4CC;
  //   //   border-color: #c0c4CC;
  //   // }
  // }
  // 我的购物车
  .sc_title {
    height: 59px;
    line-height: 59px;

    padding: 0 20px;
    margin: 50px auto 0;
    border-bottom: #7f0019 solid 1px;
    overflow: hidden;
    font-size: 26px;
    color: #000;
    h2 {
      display: inline-block;
    }
    p {
      display: inline-block;
      color: rgb(255, 0, 0);
      padding-left: 10px;
    }
    .sc_p {
      color: #000;
    }
  }
  .warehouse {
    padding: 0;
    .sc_panel_info {
      // width: 1200px;
      // margin: auto;
      text-align: left;
      overflow: hidden;
      background-color: #f2f2f2;
      font-size: 15px;
      color: #000;
      line-height: 44px;
      text-align: center;
      .sc_panel_price {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .carttitle {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      margin: auto;
      padding: 0 20px;
      li {
        width: 20%;
        font-size: 16px;
        line-height: 40px;
        color: #333;
      }
    }
    .cartlist {
      display: flex;
      justify-content: space-between;
      padding: 5px 20px;
      align-items: center;
      border-bottom: 1px solid #ccc;
      position: relative;
      .del {
        position: absolute;
        top: 42%;
        right: 0;
        padding-right: 50px;
        .icon-shanchu {
          font-size: 22px;
          cursor: pointer;
        }
      }
      li {
        width: 20%;
      }
      .carimg {
        width: 120px;
        height: 120px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .detinfo_nub {
        width: 105px;
        color: rgb(0, 0, 0);
        font-size: 15px;
        border-radius: 6px;
        border: 1px solid #999;
        border-radius: 6px;
        display: flex;
        .sub {
          width: 32px;
          height: 28px;
          background-color: #fff;
          outline: none;
          color: #555756;
          font-size: 24px;
          font-family: Arial;
          cursor: pointer;
          border: none;
          border-radius: 6px 0px 0px 6px;
        }
        .gdnb {
          width: 39px;
          height: 28px;
          text-align: center;
          border: none;
          border-left: 1px solid #999;
          border-right: 1px solid #999;
          outline: none;
        }
        .add {
          width: 32px;
          height: 28px;
          border: none;
          background-color: #fff;
          outline: none;
          color: #555756;
          font-size: 24px;
          font-family: Arial;
          cursor: pointer;
          border-radius: 0px 6px 6px 0px;
        }
      }
      .carprice {
        color: #666;
        padding-left: 5px;
      }
    }
    .check_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-bottom: 20px;
      height: 60px;
      padding: 0 20px;
      .pull_total {
        padding-right: 120px;
        font-size: 20px;
        position: relative;
        .el-button {
          padding: 8px 20px;
          position: absolute;
          top: -3px;
          right: 23px;
          background-color: #ad0002;
          color: #fff;
          font-size: 15px;
        }
      }
    }
  }
  // 订单
  .orders_box {
    width: 100%;
    padding: 20px 20px 50px 20px;
    // margin-bottom: 20px;
    .address_title {
      width: 855px;
      p {
        height: 59px;
        line-height: 59px;
        font-size: 26px;
        color: #000;
      }
      padding: 0 20px 10px 20px;
      margin: 50px auto 0;
      border-bottom: #7f0019 solid 1px;
      overflow: hidden;

      .big_box {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .address_two {
          background: url("../assets/img/光明/1111.png");
          background-size: 100% 100%;
          width: 230px;
          // height: 110px;
          font-size: 12px;
          padding: 20px;
          .give {
            margin-left: 15px;
          }

          .receipt {
            margin: 15px 0 0 15px;
          }
        }
      }
    }
    .ordinfobox {
      width: 855px;
      height: 60px;
      margin: 20px auto 0;
      color: #000;
      font-size: 15px;
      line-height: 1.8;
      .next {
        height: 40px;
        line-height: 40px;
        width: 100%;
      }

      b {
        margin-right: 20px;
      }
      small {
        color: #999999;
        font-size: 15px;
      }
    }
    .shopping {
      width: 855px;
      // height: 500px;
      margin: 20px auto 0;
      .shopping_box {
        border-bottom: dashed 1px #ccc;
        width: auto;
        padding-top: 20px;
        // border-top: #f2f2f2 solid 1px;
        color: #000;
        font-size: 15px;
        line-height: 1.7;
        margin-top: -1px;
        .dis_box{
          display: flex;
        }
        div {
          margin-bottom: 5px;
        }
        .shopping_num {
          font-weight: 700;
        }
        .shopping_title {
          font-size: 18px;
          font-weight: 700;
        }
        .lumpsum {
          font-size: 20px;
          font-weight: 600;
          span {
            color: #7f0019;
          }
        }
        .time {
          color: #7f0019;
          span {
            color: red;
          }
        }
      }
    }
    position: relative;
    .pull_total {
      position: absolute;
      right: 175px;
      bottom: -10px;
      font-size: 20px;
      color: #ad0002;
      display: flex;
      font-weight: 600;
      align-items: center;
      .el-button {
        padding: 8px 20px;
        background-color: #ad0002;
        color: #fff;
        font-size: 15px;
        margin-left: 15px;
      }
    }
  }
  .successful {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    // margin-bottom: 20px;
    .el-button {
      position: absolute;
      right: -65%;
      bottom: 20px;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .suc_font {
      position: absolute;
      bottom: 215px;
      left: 175px;
      color: #fff;
      font-size: 28px;
      font-weight: 600;
    }
  }
  ::v-deep {
    .el-step__title {
      &.is-process {
        font-weight: 100;
        color: #c0c4cc;
      }
    }
    .el-step__icon-inner {
      font-weight: 600;
      font-size: 13px;
      color: #c0c4cc;
    }
    .is-status {
      color: #67c23a;
    }
    .el-step__title {
      &.is-wait {
        color: #c0c4cc;
        font-weight: 100;
      }
    }
    .el-step__icon {
      &.is-text {
        border: 1px #c0c4cc solid;
      }
    }
  }
}
</style>